{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %}">
    <style>
        .box{
            width:450px;
            border: 1px solid #f0f0f0;
            margin-left: auto;
            margin-right: auto;
            margin-top:120px;

            padding-left:40px;
            padding-right:40px;
            padding-bottom:40px;

            box-shadow:16px 10px 5px rgb(0 0 0 / 5%);
        }
        .error_message{
            color: red;position:absolute;
        }
    </style>
</head>
<body>
<div class="box">
    <form method="POST" id="smsForm">
        <h2 style="text-align:center;">短信登录</h2>
        {% csrf_token %}
        {% for field in form %}
            {% if field.name == 'code' %}
                <div class="form-group" style="position:relative;margin-bottom:25px">
                    <label>{{field.label}}</label>
                    <div class="row">
                        <div class="col-xs-7">
                            {{ field }}
                            <span class="error_message">{{field.errors.0}}</span>
                        </div>
                        <div class="col-xs-5">
                            <input id="sendBtn" type="button" value="点击获取验证码" class="btn btn-default"/>
                        </div>
                    </div>

                </div>
            {% else %}
                <div class="form-group" style="position:relative; margin-bottom:25px">
                    <label>{{ field.label }}</label>
                    {{ field }}
                    <span class="error_message">{{field.errors.0}}</span>
                </div>
            {% endif %}
        {% endfor %}

        <button type="button" class="btn btn-default" id="loginBtn">登 录</button>
    <!--    <a href="/login/">用户名登录</a>-->
        <a href="{% url 'login' %}" style="float:right;">用户登录</a>
    </form>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="{% static 'js/csrf.js' %}"></script>
<script>
    $(function (){
        bindSendSmsEvent();
        bindLoginEvent();
    })
    function bindLoginEvent() {
        $("#loginBtn").click(function () {
             $(".error_message").empty();
            $.ajax({
                url:'{% url "sms_login" %}',
                type:"POST",
                data:$("#smsForm").serialize(),
                dataType: 'JSON',
                success:function(res) {
                    console.log(res);
                    if (res.status) {
                        // res.data = "/level/list/"
                        location.href = res.data;
                    }else {
                        $.each(res.detail, function (k,v){
                            $("#id_"+k).next().text(v[0]);
                        })
                    }
                }
            })
        })
    }


    function bindSendSmsEvent() {

        $("#sendBtn").click(function() {
            // 获取手机号


            // 清除所有的错误
            $(".error_message").empty();

            $.ajax({
                url:"/sms/send/",
                type:"POST",
                data:{
                    mobile:$("#id_mobile").val(),
                    role:$("#id_role").val()
                },
                dataType:"JSON",
                success:function (res) {
                    console.log(res);
                    if (res.status) {
                        sendSmsRemind();
                    } else {
                        $.each(res.detail, function(k,v){
                            $("#id_"+k).next().text(v[0])
                        })
                    }
                }
            })
        });
    }

    // 发送短信倒计时效果
    function sendSmsRemind() {
            let $smsBtn = $("#sendBtn");
            $smsBtn.prop("disabled",true);

            let time= 3;
            let remind = setInterval(function (){
                $smsBtn.val(time + "秒重新发送");
                time = time - 1;
                if(time < 1){
                    clearInterval(remind);
                    $smsBtn.val("点击获取验证码");
                    $smsBtn.prop("disabled",false);
                }
            },1000);
    }




</script>
</body>
</html>